<!-- 下拉框组件 -->
<template>
  <view
    class="mosowe-dropdown-component"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave">
    <view @click="showDropdown">
      <text class="text"><slot></slot></text>
      <uni-icons
	    style="color: #fff;"
        type="top"
        size="16"></uni-icons>
    </view>
    <view
      class="mosowe-dropdown-position"
      ref="mosoweDropdownPositionRef"
      :class="{
        show: show
      }"
      :style="{
        '--m-left': left,
        '--m-right': right,
        '--m-top': top,
        '--m-bottom': bottom
      }">
      <view
        class="mosowe-dropdown-content"
        :class="{
          height: list.length > 50,
          'icon-bottom': iconShowBottom
        }">
        <view class="scroll-bar">
          <template v-if="list.length < 50">
            <view
              class="mosowe-dropdown-item"
              v-for="(item, index) in list"
              :class="{
                disabled: item.disabled,
                divided: item.divided
              }"
              @click="click(item)"
              :key="index">
              {{ item.text }}
            </view>
          </template>
          <template v-else>
            <mosowe-invented-list :list="list">
              <template #default="{ item }">
                <view
                  class="mosowe-dropdown-item"
                  @click="click(item)"
                  :class="{
                    disabled: item.disabled,
                    divided: item.divided
                  }">
                  {{ item.text }}
                </view>
              </template>
            </mosowe-invented-list>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mosowe-dropdown',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    hover: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      left: '0px',
      top: '100%',
      right: 'unset',
      bottom: 'unset',
      iconShowBottom: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      let t = setTimeout(() => {
        clearTimeout(t);
        t = null;
        this.init();
      }, 100);
    });
  },
  methods: {
    init() {
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const dialogDom = this.$refs.mosoweDropdownPositionRef.$el.getBoundingClientRect();
      const dialogWidth = dialogDom.width;
      const dialogHeight = dialogDom.height;
      const offsetLeft = dialogDom.left;
      const offsetTop = dialogDom.top;
      if (dialogWidth + offsetLeft + 50 > windowWidth) {
        this.left = 'unset';
        this.right = '0px';
      }
      if (dialogHeight + offsetTop + 50 > windowHeight) {
        this.top = 'unset';
        this.bottom = '100%';
        this.iconShowBottom = true;
      }
    },
    watchClick(e) {
      const classNames = e.path
        .map((item) => {
          return item.className;
        })
        .join(',');
      // 页面上左键点击事件处理
      if (classNames.indexOf('mosowe-dropdown-component') === -1 && this.show) {
        this.show = false;
      }
    },
    click(item, index) {
      if (item?.disabled) {
        return;
      }
      this.$emit('onClick', item);
      this.show = false;
    },
    showDropdown() {
      this.show = !this.show;
    },
    mouseenter() {
      if (!this.hover) {
        return;
      }
      this.show = true;
    },
    mouseleave() {
      if (!this.hover) {
        return;
      }
      this.show = false;
    }
  }
};
</script>

<style lang="scss">
.mosowe-dropdown-component {
  width: 180rpx;
  height: 65rpx;
  line-height: 65rpx;
  font-size: 28rpx;
  border-radius: 15rpx;
  text-align: center;
  background-color:#007aff;
  position: relative;
  color: #fff;
  .text {
    cursor: pointer;
    font-size: 15px;
  }
  .mosowe-dropdown-position {
    position: absolute;
    left: var(--m-left);
    top: var(--m-top);
    right: var(--m-right);
    bottom: var(--m-bottom);
    height: 0;
    overflow: hidden;
    &.show {
      height: unset;
    }
    .mosowe-dropdown-content {
      margin: 10px;
      background-color: #007aff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      position: relative;
      padding: 5px 0;
      &::after {
        display: block;
        content: '';
        width: 0;
        height: 0;
        border: 10px solid;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        left: var(--m-left);
        right: var(--m-right);
        top: -18px;
        margin: 0 20px;
        z-index: 0;
      }
      &.icon-bottom {
        &::after {
          top: unset;
          bottom: -18px;
          border-color: #007aff transparent transparent transparent;
        }
      }

      &.height {
        height: 200px;
        overflow-y: auto;
      }
      .scroll-bar {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
		background-color: #007aff;
      }
    }
    .mosowe-dropdown-item {
      height: 48rpx;
      width: 95px;
	  text-align: center;
	  background: #007aff;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 15px;
      cursor: pointer;
      line-height: 48rpx;
      &.disabled {
        color: #999999;
        cursor: no-drop;
      }
      &.divided {
        border-top: 1px solid #ebeef5;
      }
    }
  }
}
</style>
